<template>
	<view>
		<view v-if="tempArr.length" :style="[boxStyle]" :id="dataConfig.id">
			<!-- 单列 -->
			<view class="title-top" :style="radiusStyle">
				<view class="titleleft">
					<view class="pictrue ">
						<image :src="src" class="image"></image>
					</view>
					<view class="point " :style="titleColor">{{ dataConfig.titleConfig.val }}</view>
				</view>
				<view class="more">更多<u-icon name="arrow-right" color="#808080" size="12"></u-icon>
				</view>
			</view>
			<block>
				<view class="listA">
					<view class="item" v-for="(item, index) in tempArr" :key="index" @click="goDetail(item)"
						:style="radiusStyle">
						<view class="pictrue">
							<easy-loadimage :image-src="item.image" :radius="dataConfig.contentStyle.val">
							</easy-loadimage>
							<view v-if="item.activityStyle" :style="{ backgroundImage: `url(${item.activityStyle})` }"
								class="border-picture"></view>
						</view>
						<view class="text-info text-add">
							<view class="title line2" :style="[nameColor]">
								{{ item.name }}
							</view>
							<view v-if="item.productTags && item.productTags.locationUnderTitle.length"
								class="tags-box">
								<view
									v-for="(items, index2) in item.productTags.locationUnderTitle.length>3?item.productTags.locationUnderTitle.slice(0,3):item.productTags.locationUnderTitle"
									:key="index2" class="tag-item">{{items.tagName}}</view>
							</view>
							<view class="info3">
								<view>剩{{item.stock}}件</view>
								<view class="econ">立省{{item.otPrice - item.price}}元</view>
							</view>
							<view class="price " :style="[priceColor,gobuyStyle]">
								<view v-if="priceShow">
									<text>￥</text>
									{{ item.price }}
								</view>
								<view class="btn-text">
									去抢购
								</view>
							</view>
						</view>
					</view>
				</view>
			</block>

			<view class='loadingicon' :hidden='loading==false'>
				<text class='loading iconfont icon-jiazai'></text>
			</view>
			<!-- <view class="mores-txt" v-if="goodScroll">
				<text>我是有底线的</text>
			</view> -->
		</view>
	</view>
</template>

<script>
	import {
		productList,
		productByidsApi
	} from '@/config/api.js';
	import easyLoadimage from '@/components/easy-loadimage.vue';
	import store from '../store';
	export default {
		name: 'activtiyZone',
		props: {
			dataConfig: {
				type: Object,
				default: () => {}
			},
		},
		components: {
			easyLoadimage
		},
		data() {
			return {
				tempArr: [],
				numConfig: this.dataConfig.numConfig.val, //展示多少条
				selectId: this.dataConfig.selectConfig ? this.dataConfig.selectConfig.activeValue : [], //分类
				brandId: this.dataConfig.activeValueBrand ? this.dataConfig.activeValueBrand.activeValue : [], //品牌
				productIds: this.dataConfig.goodsList.ids || [],
				merId: this.dataConfig.activeValueMer ? this.dataConfig.activeValueMer.activeValue : [], //商户
				params: { //精品推荐分页
					page: 1,
					limit: 10,
					cid: '',
					brandId: '',
					merId: '',
					priceOrder: '',
					salesOrder: ''
				},
				goodScroll: false,
				loading: false,
				src: this.dataConfig.logoConfig.url ?
					this.dataConfig.logoConfig.url : store.state.imgUrl + '/crmebimage/mer_plat_admin/zhuanqu-title.png',
			};
		},
		computed: {
			// 圆角设置
			radiusStyle() {
				return [{
					'border-radius': this.dataConfig.bgStyle.val ? this.dataConfig.bgStyle.val + 'px' : '0'
				}];
			},
			//商品名称颜色
			titleColor() {
				return {
					'color': this.dataConfig.titleColor.color[0].item,
				}
			},
			//最外层盒子的样式
			boxStyle() {
				return {
					borderRadius: this.dataConfig.bgStyle.val * 2 + 'rpx',
					background: `linear-gradient(${this.dataConfig.bgColor.color[0].item}, ${this.dataConfig.bgColor.color[1].item})`,
					margin: this.dataConfig.mbConfig.val * 2 + 'rpx' + ' ' + this.dataConfig.lrConfig.val * 2 + 'rpx' +
						' ' + 0,
					padding: this.dataConfig.upConfig.val * 2 + 'rpx' + ' ' + 0 + ' ' + this.dataConfig.downConfig.val *
						2 + 'rpx'
				}
			},
			//文章图片的圆角和高度
			imgStyle() {
				return {
					'border-radius': this.dataConfig.contentStyle.val * 2 + 'rpx',
				}
			},
			//价格颜色
			priceColor() {
				return {
					'color': this.dataConfig.priceColor.color[0].item,
				}
			},
			//名称颜色
			nameColor() {
				return {
					color: this.dataConfig.nameColor.color[0].item
				};
			},
			//已售数量
			// soldColor() {
			// 	return {
			// 		'color': this.dataConfig.soldColor.color[0].item,
			// 	}
			// },
			//价格
			priceShow() {
				if (this.dataConfig.typeConfig.activeValue.includes(1)) {
					return true;
				} else {
					return false;
				}
			},
			//排序，0综合，1销量，2价格
			goodsSort() {
				return this.dataConfig.goodsSort.tabVal
			},
			//内容圆角
			contentStyle() {
				return {
					'border-radius': this.dataConfig.contentStyle.val ? this.dataConfig.contentStyle.val + 'px' : '0'
				};
			},
			gobuyStyle() {
				return {
					'background-image': `url(${store.state.imgUrl + '/crmebimage/mer_plat_admin/gobuy-btn.png'})`,
				};
			},
		},
		mounted() {
			this.params.page = 1;
			this.goodScroll = false;
			this.tempArr = [];
			this.getProList();
		},
		//uniapp小程序用deep重写组件样式不生效
		options: {
			styleIsolation: 'shared'
		},
		methods: {
			//根据商品id集合查询对应商品
			getProductByids(data) {
				let ids = (data.map((item) => item.id)).slice(0, this.dataConfig.numConfig.val).join(',');
				productByidsApi(ids).then((res) => {
						this.tempArr = res.data;
					})
					.catch(res => {
					});
			},
			getProList() {
				this.getProductByids(this.dataConfig.goodsList.list);
			},
			productslist() {
				if (this.goodScroll) return;
				this.loading = true
				this.params.limit = this.numConfig;
				this.params.cid = this.selectId.join(',');
				this.params.brandId = this.brandId.join(',');
				this.params.merId = this.merId.join(',');
				if (this.goodsSort === 0) {
					this.params.priceOrder = '';
					this.params.salesOrder = '';
				} else if (this.goodsSort === 1) {
					this.params.priceOrder = '';
					this.params.salesOrder = 'desc';
				} else {
					this.params.priceOrder = 'desc';
					this.params.salesOrder = '';
				}

				productList(this.params).then(res => {
					this.$set(this.params, 'page', this.params.page + 1);
					this.goodScroll = this.params.page > res.data.totalPage;
					this.tempArr = this.tempArr.concat(res.data.list || []);
					this.loading = false
				});
			},
			goDetail(item) {
				this.$emit('detail', item);
			}
		}
	};
</script>

<style lang="scss" scoped>
	.mores-txt {
		text-align: center;
	}

	.text-add {
		display: flex;
		flex-direction: column;
		justify-content: space-between;
	}


	.title-top {
		height: 40px;
		display: flex;
		align-items: center;
		justify-content: space-between;
		background: linear-gradient( 90deg, #FDEEEE 0%, #FEFFFE 100%);
		padding: 0 15px;

		.titleleft {
			display: flex;
			align-items: center;
		}

		.pictrue {
			width: 85px;
			height: 19px;
			margin-right: 0px;

			image,
			.image,
			::v-deep.el-image {
				width: 100%;
				height: 100%;
			}
		}

		.lines {
			width: 1px;
			height: 12px;
			background-color: #fff;
			opacity: 0.6;
			margin-left: 8px;
		}

		.point {
			font-size: 12px;
			color: #fff;
			margin-left: 7px;
			margin-right: 2px;
			z-index: 9;
		}

		.styleAll {
			width: 17px;
			height: 17px;
			background-color: #2f2f2f;
			border-radius: 3px;
			color: #fff;
			text-align: center;
		}

		.more {
			opacity: 1;
			font-size: 12px;
			color: #808080;
			display: flex;

			.iconfont {
				font-size: 12px;
			}
		}
	}

	.listA {
		width: 100%;
		margin-top: 12px;

		.item {
			display: flex;
			width: 100%;
			background-color: #fff;
			margin-bottom: 12px;

			.pictrue {
				width: 138px;
				height: 140px;
				position: relative;
				flex-shrink: 0;

				image {
					width: 100%;
					height: 100%;
				}
			}

			.text-info {
				margin-left: 30rpx;
				// flex: 1
			}
		}
	}





	.text-info {
		width: 100%;
		padding: 10px 14px 10px 0;

		.title {
			width: 100%;
			height: 70rpx;
			line-height: 18px;
			font-weight: bold;
			font-size: 14px;
			color: #1A1A1A;
			overflow: hidden; //溢出隐藏
			text-overflow: ellipsis; // 溢出用省略号显示
			-webkit-line-clamp: 2; // 显示的行数
			display: -webkit-box; // 作为弹性伸缩盒子模型显示
			-webkit-box-orient: vertical; // 设置伸缩盒子的子元素排列方式: 从上到下垂直排列
		}

		.tags-box {
			display: flex;
			margin-top: 6px;

			.tag-item {
				height: 19px;
				border-radius: 4px;
				padding: 0 7px;
				font-size: 12px;
				background: #FEEFF0;
				color: #FE0000;
				line-height: 19px;
				margin-right: 6px;
			}
		}

		.info3 {
			font-weight: 400;
			font-size: 11px;
			margin-top: 8px;
			color: #808080;
			display: flex;
			justify-content: space-between;
			align-items: center;
			padding-right: 10px;

			.econ {
				font-size: 12px;
				color: #333333;
			}
		}

		.old-price {
			font-weight: normal;
			font-size: 24rpx;
			color: #999;
		}

		.price {
			font-size: 36rpx;
			width: 100%;
			font-weight: bold;
			padding: 0 13px;
			height: 32px;
			background-size: 100% 100%;
			background-repeat: no-repeat;
			display: flex;
			align-items: center;
			justify-content: space-between;

			text {
				padding-bottom: 4rpx;
				font-size: 26rpx;
				font-weight: normal;
			}

			.btn-text {
				font-weight: bold;
				font-size: 14px;
				color: #FFFFFF;
			}
		}
	}

	.mer_badge {
		padding: 0 4rpx;
		background-color: theme;
		color: #fff;
		font-size: 20rpx;
		display: inline-block;
		border-radius: 4rpx;
		line-height: 28rpx;
		height: 28rpx;
	}
</style>